// 一进入界面，检查是否登录
checkLogin()

// 渲染用户名功能
showUserName()

// 退出登录功能
// 给退出按钮注册点击事件
document.querySelector('#logout').addEventListener('click', () => {
    // 提示用户退出成功
    showToast('退出成功')
    logout()
})

// 获取学生信息功能
async function getData() {
    // const res = await axios.get('/dashboard',{
    //     // 请求参数
    //     // params: {}

    //     // 请求头参数
    //     headers: {
    //         Authorization: localStorage.getItem('my-token')
    //     }
    // })
    const res = await axios({
        url:'/dashboard',
        method: 'get',
        // headers: {
        //     Authorization: localStorage.getItem('my-token')
        // }
    })
    console.log(res);
    // 获取学生数据并渲染
    const {overview} = res.data
    renderOverview(overview)
    // 渲染学生就业薪资走势
    const year = res.data.year
    renderSalary(year)
}

// 渲染学生信息功能
function renderOverview(data) {
    Object.keys(data).forEach(key => {
        document.querySelector(`.${key}`).innerHTML = data[key]
    })
}

getData()

// 渲染学生就业薪资走势
function renderSalary(yearData) {
    // 1. 基于准备好的容器，创建echarts实例
    const myChart = echarts.init(document.querySelector('#line'))
    // 2. 指定配置和数据
    const option = {
        title: {
            text:'2024全学科薪资走势',
            left:'5',
            top:'12'
        },
        xAxis: {
          type: 'category',
          data: yearData.map(item => item.month),
          axisLine: {
            lineStyle: {
                color: 'rgb(81,141,239)',
                type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
                width:1,
                type: 'dashed',
                color: ['rgb(81,141,239)','blueviolet']
            }
          }
        },
        series: [
          {
            data: yearData.map(item => item.salary),
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 8,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: '#1698FB' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#3B6BFB' // 100% 处的颜色
                    }],
                    global: false, // 缺省为 false
                    
                }
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    // x: 0, x2: 0, y: 0, y2: 1 是从上到下
                    // x: 0, x2: 1, y: 0, y2: 0 是从左到右
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#1897FB' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            symbolSize: 15,
          }
        ],
        grid:{
            top:'20%'
        },
        tooltip: {
            show: true,
            trigger: 'item', // 触发类型 -> 标识点
            trigger: 'axis', // 触发类型 -> 轴
        }
        
      };
    // 3. 利用指定的配置和数据展示图表
    myChart.setOption(option)
}